<template>
  <el-dialog :lock-scroll="false" :visible.sync="visible" customClass="live-send-announcement-views">
    <div class="title">查看公告箱（共 <span>{{announcement_listData.length}}</span> 条）</div>
    <ul id="dataBar">
      <li v-for="(chat, index) in announcement_listData">
        <div class="liBox" :class="{Hauto:index==indexNum}">
          <div class="topContent">
            <span class="time">[ {{chat.create_time}} ]</span>
            <span class="infoTitle">{{chat.content}}</span>
            <span class="more" :class="{open:index==indexNum}" @click="open(index)">{{index==indexNum?'收起':'展开更多'}}</span>
          </div>
          <div>{{chat.content}}</div>
        </div>
        <div class="liBoxBottom">
          <span class="bens cancel" @click="cancelBtn(chat.id)">删除</span>
          <el-switch
            v-model="chat.status"
            class="bens"
            on-color="#3c92e8"
            off-color="#de4414"
            on-value="0"
            off-value="1"
            @change="changeoff(chat.status,chat.id)">
          </el-switch>
        </div>
      </li>
    </ul>
  </el-dialog>
</template>

<script>
  export default {
    name: 'recharge-vip',
    data () {
      return {
        visible: false,
        indexNum: '',
      }
    },
    props: {
      visitor_id: {
        default: false,
      },
      announcement_listData: {
        default: false,
      },
    },
    methods: {
      open(index) {
        this.indexNum = index
      },
      changeoff(status,id) {
        if (status==0) {
          this.comment(id,3)
        } else {
          this.comment(id,2)
        }
      },
      comment(id,type) {
        let params = {
          visitor_id: this.visitor_id,
          notice_id: id,
          type: type
        }
        this.$http.post('/index/beta_api/operaNotice', params).then((res) => {
          if (res.code==1) {
            this.$message({
              message: res.msg,
            })
          } else {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
      cancelBtn(id) {
        this.comment(id,1)
      },
      send_announcement_post () {
        let params = {
          visitor_id: this.visitor_id,
          content: this.send_announcement_text,
          chat_status: 2,
        }
        this.$http.post('/index/beta_api/sendChat', params).then((res) => {
          this.send_announcement_text = ''
          this.visible = false
          if (Number(res.code) === 3) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  /*公告弹窗*/
  .live-send-announcement-views {
    border-radius: 10px;
    overflow: hidden;
    width: 620px;
    .el-dialog__header {
      text-align: left;
      padding-top: 0px;
      border-bottom: none;
      .el-dialog__headerbtn {
        top: 11px!important;
        right: 12px!important;
      }
    }
    .el-dialog__body {
      padding: 10px 0px 10px;
      .title {
        padding: 0 0 8px 30px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 10px;
        span {
          color: #3c92e8;
        }
      }
      #dataBar::-webkit-scrollbar {
        width:8px;
      }
      #dataBar::-webkit-scrollbar-button    {
        display: none;
      }
      #dataBar::-webkit-scrollbar-track     {
        background:#e7e7e7;
      }
      #dataBar::-webkit-scrollbar-thumb{
        background:#b5b5b5;
        border-radius:4px;
      }
      #dataBar::-webkit-scrollbar-corner {
        background:#e7e7e7;
      }
      ul {
        padding: 0 30px;
        max-height: 310px;
        overflow-y: scroll;
        li {
          padding: 6px 0;
          .liBox {
            border-bottom: solid 1px #dddddd;
            padding-bottom: 4px;
            overflow: hidden;
            height: 30px;
            &.Hauto {
              overflow: initial;
              height: auto;
            }
          }
          .liBoxBottom {
            margin-top: 10px;
            overflow: hidden;
            .cancel {
              font-size: 12px;
              color: #1f7b25;
              margin-left: 20px;
              padding-left: 23px;
              position: relative;
              line-height: 21px;
              cursor: pointer;
              &:before {
                content: '';
                background: url("../../static/img/del_icon1.png");
                width: 18px;
                height: 18px;
                position: absolute;
                left: 0;
                top: 2px;
              }
            }
            .bens {
              float: right;
            }
          }
          .topContent {
            display: flex;
            .time {
              width: 140px;
              display: inline-block;
              font-size: 12px;
              color: #999;
            }
            .infoTitle {
              font-size: 14px;
              color: #222;
              width: 300px;
              display: inline-block;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .more {
              flex: 1;
              text-align: right;
              font-size: 12px;
              color: #999999;
              cursor: pointer;
              &.open {
                &:after {
                  transform: rotate(180deg) translateY(2px);
                }
              }
              &:after {
                content: '';
                background: url("../../static/img/arrow_icon.png");
                width: 10px;
                height: 5px;
                display: inline-block;
                margin-left: 6px;
                transform: translateY(-2px);
                transition: all .2s linear;
              }
            }
          }
        }
      }
    }
  }
</style>
